<template>
  <div>
    <BDhear :num="1"></BDhear>
    <div class="main">
      <ul v-for="item in selectaLotlist" :key="item.id">
        <li>
          <img src="../../assets/main1.png" alt="" />
          <h3>{{ item.gname }}</h3>
          <p>
            在招标投标中招标人为保证投标人不得撤销投标文件、中标后不得无正当理由不与招标人订立合同等，促进交易的顺利执行
          </p>
          <button @click="Institution(item.id, item.gname)">立即申请</button>
        </li>
        <!-- <li>
        <img src="../../assets/main1.png" alt="" />
        <h3>{{selectaLotlist[0].gname}}</h3>
        <p>
          在招标投标中招标人为保证投标人不得撤销投标文件、中标后不得无正当理由不与招标人订立合同等，促进交易的顺利执行
        </p>
        <button @click="Institution">立即申请</button>
      </li>
      <li>
        <img src="../../assets/main2.png" alt="" />
        <h3>{{selectaLotlist[1].gname}}</h3>
        <p>
          在招标投标中招标人为保证投标人不得撤销投标文件、中标后不得无正当理由不与招标人订立合同等，促进交易的顺利执行
        </p>
        <button @click="Institution">立即申请</button>
      </li>
      <li>
        <img src="../../assets/main3.png" alt="" />
        <h3>{{selectaLotlist[2].gname}}</h3>
        <p>
          在招标投标中招标人为保证投标人不得撤销投标文件、中标后不得无正当理由不与招标人订立合同等，促进交易的顺利执行
        </p>
        <button @click="Institution">立即申请</button>
      </li>
      <li>
        <img src="../../assets/main4.png" alt="" />
        <h3>{{selectaLotlist[3].gname}}</h3>
        <p>
          在招标投标中招标人为保证投标人不得撤销投标文件、中标后不得无正当理由不与招标人订立合同等，促进交易的顺利执行
        </p>
        <button @click="Institution">立即申请</button>
      </li>
      <li>
        <img src="../../assets/main5.png" alt="" />
        <h3>{{selectaLotlist[4].gname}}</h3>
        <p>
          在招标投标中招标人为保证投标人不得撤销投标文件、中标后不得无正当理由不与招标人订立合同等，促进交易的顺利执行
        </p>
        <button @click="Institution">立即申请</button>
      </li>
      <li>
        <img src="../../assets/main6.png" alt="" />
        <h3>{{selectaLotlist[5].gname}}</h3>
        <p>
          在招标投标中招标人为保证投标人不得撤销投标文件、中标后不得无正当理由不与招标人订立合同等，促进交易的顺利执行
        </p>
        <button @click="Institution()">立即申请</button>
      </li> -->
      </ul>
      <!-- <div class="xiayibu_btn">
      <el-button
        @click="Institution"
        style="width: 360px; height: 60px"
        type="primary"
        >下一步</el-button
      >
    </div> -->
    </div>
  </div>
</template>

<script>
import { selectaLot } from "@/api/selectaLot";
import BDhear from "./BDhear.vue";
export default {
  components: {
    BDhear,
  },
  name: "SelectALot",
  data() {
    return {
      selectaLotlist: [],
    };
  },
  created() {
    sessionStorage.setItem("bhlein", "");
    this.selectaLots();
    //  sessionStorage.setItem('projectid',this.$route.query.projectid)
    //  console.log("第一步传参",this.$route.query)
  },
  methods: {
    //页面
    selectaLots() {
      selectaLot({
        offset: 1,
        limit: 10,
        keywords: "",
      }).then((response) => {
        console.log(response);
        this.selectaLotlist = response.data.data.rows;
        this.selectaLotlist.splice(3, 1);
        console.log(this.selectaLotlist);
      });
    },
    Institution(typeid, nametype) {
      this.$confirm("当前选择为:" + nametype + ", 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("当前保函", typeid, nametype);
          sessionStorage.setItem("typeid", typeid);
          sessionStorage.setItem("nametype", nametype);
          sessionStorage.setItem("bhlein", nametype);
          this.$router.push({ path: "/BidSecurity/financialInstitution" });
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
ul,
li {
  list-style: none;
}
.main {
  width: 100%;
  /* height: 600px; */
  padding: 20px;
  /* top: 0;
  left: 0;
  right: 0;
  bottom: 0; */
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}
.main ul {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: 405px; */
  flex-direction: column;
  padding-right: 10px;
  width: 32%;
  height: 262.5px;
  /* border: #1795ff 1px solid; */
}
.main li {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-direction: column;
  align-items: center;
  height: 292.5px;
  border: #1795ff 1px solid;
}
.main li img {
  width: 70px;
  height: 70px;
  /* margin-left: 160px;
  margin-top: 20px; */
}
.main li h3 {
  /* margin-left: 140px;*/
  margin-top: 10px;
}
.main li p {
  margin: 10px;
  color: #333;
}
.main li button {
  /* margin-left: 130px;
  margin-top: 10px; */
  width: 120px;
  height: 40px;
  color: #1795ff;
  background-color: #fff;
  border: #1795ff 1px solid;
}
.xiayibu_btn {
  padding-top: 20px;
  padding-bottom: 40px;
  position: relative;
  left: 42%;
}
</style>
